<template>
  <div class="page-content">
    <baseNav/>
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="70rem">
          <el-row>
           <el-select :default-active="$route.path" @change="chickvalue"
             v-model="searchValue" filterable placeholder="请输入/请选择" class="h-m-select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            v-model="item.value">
          </el-option>
        </el-select>
          </el-row>
          </el-form>
      </div>
    </table-bar>


    <!-- 表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="false"
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="false"
    >
     <el-table-column
      type="index"
      width="50"
      label="序号">
    </el-table-column>
     <el-table-column
        label="id"
        prop="id"
        v-if="columns[0].show"
      />
      <el-table-column
        label="名称"
        prop="typeName"
        v-if="columns[1].show"
      />
      <el-table-column
        label="类型"
        prop="type"
        v-if="columns[2].show"
      />
      <el-table-column
        label="库存"
        prop="amount"
        v-if="columns[3].show"
      />
      <el-table-column
       label="单位"
        prop="unit"
        v-if="columns[4].show"
      />
      <el-table-column
       label="备注"
        prop="remark"
        v-if="columns[5].show"
      />

    <el-table-column fixed="right" label="操作" width="150rem">
        <template slot-scope="scope">
          <el-button type="text"
          icon="el-icon-edit"
          @click="showEditDialog(scope.row.id)"
          >
            编辑
          </el-button>
          <!-- <el-button type="text" style="color: #FA6962" icon="el-icon-delete"  @click="tableDelete(scope.row.id)">
            删除
          </el-button> -->
        </template>
      </el-table-column>
    </TheTable>
    <!-- 表格区域结束 -->
    <!-- 页码条区域开始 -->
    <div class="page-css">
      <el-pagination
        :page-sizes="[2, 5, 10, 15]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="true"
      >
      </el-pagination>
    </div>
    <!-- 页码条区域结束 -->

        <!-- 修改订单弹窗开始 -->
    <el-dialog
      title="修改库存"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="eidtDialogClosed">
      <el-form
      ref="editFormRef"
      :model="editForm"
      label-width="4rem"
      :rules="editFormRules"
      >
           <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="名称" prop="typeName">
            <el-input v-model="editForm.typeName"  ></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
           <el-form-item label="类型" prop="type">
            <el-input v-model="editForm.type" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="10">
          <el-form-item label="库存" prop="amount">
            <el-input v-model="editForm.amount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="单位" prop="unit">
            <el-input v-model="editForm.unit" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="22">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="editForm.remark" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click=" editUserInfo">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 修改订单弹窗结束 -->
  </div>
</template>


<script>
import baseNav from "@/components/Dovecote/StoreManage/baseNav";

import {
  getAllInfoByPage,
  showEidtRequest,
  EidtRequest,
  fuzzySearchReq1,
  fuzzySearchReq2,
} from "@/api/Dovecote/StoreManage/MaterialStore.js";

export default {
  name: "DrugStore",
  meta: {
    title: "药品库存",
  },
  components: {
      baseNav,
    },
  data() {
    return {
      searchValue:"",
      options: [],
      arr:[],
        value: '',
      // 根据库存类型查询
       storeType:"",
      // -------------旧数据---------
      //分类
      searchType: {
        baseId: "",
        dovecoteNumber: "A01",
        type: "药品",
      },
      //是否打开表单
      dialogVisible: false,
      value: "",
      // 请求的页面数据
      allList: [],
      page: {
        current: 1,
        pageSize: 5,
        pageNum: 1,
        total: 4,
      },
      //详情列表
      dialogTableVisible: false,
      tableData: [],
      // 已修改
      columns: [
        { name: "id", show: false, prop: "id" },
        { name: "名称", show: true, prop: "typeName"},
        { name: "类型", show: true, prop: "type" },
        { name: "库存", show: true, prop: "amount" },
        { name: "单位", show: true, prop: "unit" },
        { name: "备注", show: true, prop: "remark" },

      ],
      // 控制修改用户对话框的显示与隐藏
      editDialogVisible:false,
      // 查询到的用户信息对象
      editForm:{},
      // 修改表单的验证规则对象
      editFormRules:{
        typeName:[
          { required:true, message:"请输入该库存名称", trigger:'blur'},
        ],
        type:[
          { required:true, message:"请输入类型", trigger:'blur'},
        ],
        amount:[
          { required:true, message:"请输入库存数量", trigger:'blur'},
        ],
        unit:[
          { required:true, message:"请输入单位", trigger:'blur'},
        ],
        remark:[
          { required:true, message:"请输入备注", trigger:'blur'},
        ],
      },
      a:"",
    };
  },
    created() {
      this.setAllList();
      this.fuzzySearch();
   },
  methods: {
     // 模糊查询数据获取
    async fuzzySearch(){
      const { data: res } = await fuzzySearchReq1(
      );
      console.log("空参模糊查询数据", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else{

          for(var i=0;i<res.data.length;i++){
            if(res.data[i].type == "药品"){
              this.arr.push(res.data[i].typeName)
            }
          }
          for(var i=0;i<this.arr.length;i++){
            this.options.push({value:''});
            this.options[i].value=this.arr[i];
          }
        }
    },
    handleClick () {
      alert('button click')
    },
    // 模糊查询实现
    async  chickvalue () {
      console.log("传参搜索",this.searchValue);
      const { data: res } = await fuzzySearchReq2(
        this.searchValue
      );
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else{
        this.allList = res.data;
      }
    },


    changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
      },
    // 分页获取数据
    async setAllList() {
      this.searchType.baseId = this.$store.state.Usersetting.BaseInfo.id;
      const { data: res } = await getAllInfoByPage(
        this.page.pageNum,
        this.page.pageSize,
        this.searchType,
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("查询数据失败");
      } else {
        this.allList = res.data.records;
        this.page.total = res.data.total;

      }
    },

    // 根据id删除订单
    async tableDelete(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该订单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteOrder(id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该订单");
        this.setAllList();
      } else {
        this.$message.error("删除该订单失败");
      }
    },
   handleCurrentChange(newSize){
      console.log(newSize)
      this.page.pageNum = newSize;
      // 重新获取数据
      this.setAllList()

    },
    handleSizeChange(newPage){
      console.log(newPage)
      this.page.pageSize = newPage
      this.setAllList()
    },
    // 根据id展示编辑用户的对话框
    async showEditDialog(id){
      console.log(id)
      const { data: res } = await showEidtRequest(id);
      console.log("修改用户请求到的列表", res);
      if(res.statusCode !== 20000){
          this.$message.error("查询数据失败");
      }

      this.editForm = res.data;
      this.editDialogVisible = true;
    },
    // 监听修改用户对话框的关闭事件
    eidtDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    // 按下确定按钮，修改数据
    editUserInfo(){
      const id = this.editForm.id;
      delete this.editForm.deleted;
      delete this.editForm.guige;
      delete this.editForm.id;
      delete this.editForm.typeId;
      delete this.editForm.version;
      delete this.editForm.gmtCreate;
      delete this.editForm.gmtModified;
      this.$refs.editFormRef.validate(async valid=>{
        if(!valid) return
        // 发起修改用户信息的数据请求
        const{data:res} = await EidtRequest(id,this.editForm)
        if(res.statusCode !== 20000) {
          return this.$message.error("修改用户失败");
        }
        console.log("修改后的数据",res)
        // 关闭对话框
        this.editDialogVisible = false;
        // 刷新数据列表
        this.setAllList()
        // 提示修改成功
        this.$message.success("更新用户成功");
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.search {
  background-color: #fafafa;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  padding: 0.6rem;
  margin-bottom: 0.6rem;
}
.page-css{
   margin-top: 1.1rem;
  text-align: center;
}
</style>
